<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="new_file.js"></script>
		<script>
			function a(id) {
				return document.getElementById(id);
			}
			window.onload = function() {
				var cnv = a("canvas");
				var cxt = cnv.getContext("2d");
				var r = 5;
				var x = 50;
				var y = 100;
				
				var colors=["","","","","","","","","",""]
				
				window.setInterval(function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
					var d = new Date();
					var h = d.getHours();
					var m = d.getMinutes();
					var s = d.getSeconds();
					var s1 = Math.floor(s % 10);
					var s10 = Math.floor(s / 10);
					var m1 = Math.floor(m % 10);
					var m10 = Math.floor(m / 10);
					var h1 = Math.floor(h % 10);
					var h10 = Math.floor(h / 10);
					digit(s1,43*2*r);
					digit(s10,36*2*r);
					digit(m1,25*2*r);
					digit(m10,18*2*r);
					digit(h1,7*2*r);
					digit(h10,0);
					addcolon(14*2*r);
					addcolon(32*2*r);
					function addcolon(dis){
						for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(colon[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "red"
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
					}
					
					function digit(time,dis){
					switch(time) {
						case 0:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n0[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 1:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n1[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 2:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n2[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 3:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n3[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 4:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n4[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 5:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n5[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 6:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n6[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 7:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n7[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 8:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n8[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
						case 9:
							for(i = 0; i < 10; i++) {
								for(j = 0; j < 7; j++) {
									if(n9[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = colors[Math.floor(Math.random()*10)];
										cxt.arc(dis+x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							break;
					}
					}
					
				},200);

			}
		</script>
	</head>

	<body>
		<canvas id="canvas" width="2000" height="1500" style="border: 1px solid silver;"></canvas>
	</body>

</html>